<template>
  <div class="trade-buy-log-index">
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      style="padding-bottom:50px"
    >
      <div class="van-cell van-hairline van-field" @click="$router.push({ name: 'tradeSellLog' })">查看销售记录(零售)日志</div>

      <van-collapse v-model="activeNames">
        <van-collapse-item v-for="item in list" :key="item.trade_sell_id" :name="item.trade_sell_id">
          <div slot="title">
            编号:{{ item.create_time }}
            <span v-if="item.status=='0'" class="van-tag van-hairline--surround van-tag--plain">等候匹配</span>
            <span v-else-if="item.status=='1'" class="van-tag van-hairline--surround van-tag--plain van-tag--danger">匹配成功</span>
            <span v-else-if="item.status=='2'" class="van-tag van-hairline--surround van-tag--plain van-tag--success">打款中</span>
            <span v-else-if="item.status=='3'" class="van-tag van-hairline--surround van-tag--plain van-tag--primary">确认收款中</span>
            <span v-else-if="item.status=='4'" class="van-tag van-hairline--surround van-tag--plain van-tag--danger">未收到款</span>
            <span v-else-if="item.status=='5'" class="van-tag van-hairline--surround van-tag--plain">冻结订单</span>
            <span v-else-if="item.status=='6'" class="van-tag van-hairline--surround van-tag--plain van-tag--success">完成销售</span>
            <span v-else-if="item.status=='7'" class="van-tag van-hairline--surround van-tag--plain van-tag--danger">取消订单</span>
          </div>

          <div class="van-row">
            <div class="van-col van-col--12">编号:</div>
            <div class="van-col van-col--12">{{ item.create_time }}</div>
            <div class="van-col van-col--12">数量:</div>
            <div class="van-col van-col--12">{{ item.amount }}</div>
            <div class="van-col van-col--12">创建时间:</div>
            <div class="van-col van-col--12">{{ new Date(item.create_time * 1000).toLocaleString() }}</div>
						<!--<div v-if="item.status=='0'" class="van-col van-col--24" style="text-align: center;"><van-button size="mini" type="danger" style="width:100%" @click="onClickCancel(item.trade_sell_id)">取消订单</van-button></div>-->
						<div v-if="item.status=='2'" class="van-col van-col--24" style="text-align: center;"><van-button size="mini" type="primary" style="width:100%" @click="onClickConfirm(item.trade_sell_id)">查看信息</van-button></div>
            <div v-if="item.status=='1'" class="van-col van-col--12">打款时限:</div>
            <div v-if="item.status=='1'" class="van-col van-col--12">{{ new Date(((item.last_time * 1) + 21600) * 1000).toLocaleString() }}</div>
            <div v-if="item.status=='3'" class="van-col van-col--24" style="text-align: center;"><van-button size="mini" type="danger" style="width:100%" @click="onClickConfirm(item.trade_sell_id)">确认收款</van-button></div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </van-list>
  </div>
</template>

<script>
import { Tag, Row, Col, List, Button, Collapse, CollapseItem, Toast, Dialog } from 'vant';
import ajaxVant from '../../../../../utils/ajaxVant';
import auth from '../../../../../utils/auth';

export default {
  components: {
    [Tag.name]: Tag,
    [Row.name]: Row,
    [Col.name]: Col,
    [List.name]: List,
    [Button.name]: Button,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem
  },
  data() {
    return {
      activeNames: [],
      list: [],
      loading: false,
      finished: false,
      pager: {
        current: 1,
        limit: 6,
        totalPages: 1
      }
    };
  },
  methods: {
    onClickCancel(id) {
      Dialog.confirm({
        title: '取消订单',
        message: '确认取消订单？'
      }).then(function() {
        auth.getToken().then(function(token) {
          ajaxVant.put('/trade/business/sell/' + id + '/cancal?token=' + token, '').then(function(res) {
            if (res !== false) {
              Toast(res.msg);

              setTimeout(() => {
                window.location.reload();
              }, 1000);
            }
          });
        });
      }).catch(function() {
        console.log(id);
      });
    },
    onClickConfirm(tradeSellId) {
      this.$router.push({ name: 'tradeBusinessSellConfirm', params: { id: tradeSellId }});
    },
    onLoad() {
      var _this = this;
      _this.loading = true;
      if (_this.pager.current > _this.pager.totalPages) {
        _this.finished = true;
        _this.loading = false;
        return false;
      }
      auth.getToken().then(function(token) {
        ajaxVant.get('/trade/business/sell?page=' + _this.pager.current + '&token=' + token + '&limit=' + _this.pager.limit).then(function(data) {
          if (data !== false && typeof (data.pager) !== 'undefined') {
            if (typeof (data.pager.items) === 'undefined' || data.pager.items.length <= 0) {
              _this.finished = true;
            } else {
              for (var i in data.pager.items) {
                _this.list.push(data.pager.items[i]);
              }

              _this.pager.totalPages = data.pager.total_pages;
            }
          } else {
            _this.finished = true;
          }

          _this.pager.current += 1;
          _this.loading = false;
        });
      });
    }
  }
};

</script>
